<template>
	<div id="productdetails">
	<el-container>
	  <el-header style="height: 230px;">
		 <div class="container"style="height:210px; width: 1524px;">
			<div class="header-wrap" style="height: 100px; width: 1524px;" >
				 <div class="logo-left">
			 			  <a href="#" onclick="history.go(-1)">
			 				  <img style="height: 80px;" src="@/assets/imgs/theme/logo.png" alt="logo" />
			 			  </a>
			 </div>
			 <div class="header-right">
			 			<div class="header-right-input">
							<template>
							  <el-select @change="sortProduct(selectvalue)" v-model="selectvalue" filterable placeholder="请选择">
							    <el-option
							      v-for="item in options"
							      :key="item.id"
							      :label="item.productTypeName"
							      :value="item.id">
							    </el-option>
							  </el-select>
							</template>
							  <el-input style="width: 500px;" v-model="input" placeholder="请输入内容" ></el-input>
							  <el-button type="primary" @click="selectProduct">查询</el-button>
						</div>	
						<div class="header-right-icon">
							<el-badge :value="12" class="item"  type="success">
							<a href="#"><i class="el-icon-star-off"></i></a>
							</el-badge>
							<label>收藏</label>
							<a  href="#"><i class="el-icon-user"></i></a><label>个人中心</label>
							<el-badge :value="12" class="item" type="success">
							<a href="#"><i class="el-icon-shopping-cart-2"></i></a>
							</el-badge>
							<label>购物车</label>
						</div>
			 </div>
			</div>
			<div class="header-wrap-2">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
				  <el-menu-item index="1">处理中心</el-menu-item>
				  <el-submenu index="2">
				    <template slot="title">商品类型1</template>
				    <el-menu-item index="2-1">商品类型1</el-menu-item>
				    <el-menu-item index="2-2">商品类型2</el-menu-item>
				    <el-menu-item index="2-3">商品类型3</el-menu-item>
				    <el-submenu index="2-4">
				      <template slot="title">商品类型4</template>
				      <el-menu-item index="2-4-1">选项1</el-menu-item>
				      <el-menu-item index="2-4-2">选项2</el-menu-item>
				      <el-menu-item index="2-4-3">选项3</el-menu-item>
				    </el-submenu>
				  </el-submenu>
				  <el-menu-item index="3" disabled>导航1</el-menu-item>
				  <el-menu-item index="4" >导航2</el-menu-item>
				  <el-menu-item index="5" >导航3</el-menu-item>
				  <el-menu-item index="6" >导航4</el-menu-item>
				  <el-menu-item index="7" >导航5</el-menu-item>
				  <el-submenu index="8">
					  <template slot="title">导航6</template>
					  <el-menu-item index="2-1">商品类型1</el-menu-item>
					  <el-menu-item index="2-2">商品类型2</el-menu-item>
					  <el-menu-item index="2-3">商品类型3</el-menu-item>
				  </el-submenu>
				  <el-menu-item index="9"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
				</el-menu>
				<div class="header-wrap-2-right hotline">
					<img style="width: 45px; margin-right: 8px;" src="@/assets/imgs/theme/daohang.png" alt=""/>
					<p class="header-wrap-2-right-p">1900 - 888</p>
					<span class="header-wrap-2-right-span" >24/7 Support Center</span>
				</div>
			</div>
			
		 </div>
	  </el-header>
	  
		<div class="">
		<el-row type="flex" class="row-bg" justify="center" >
		  <el-col :span="9"><div class="grid-content bg-purple">
		  <div  v-for="(f, index) in pdds" :key="index" class="imgs">
		    <img :src="f.imgUrl" />
		  </div>
		  </div></el-col>
		  
		  <el-col :span="9"><div class="grid-content bg-purple-light">
		  <div  v-for="(f, index) in pdds" :key="index" class="imgs2">
		   <div class="d" >
			   <h2 class="product-details">{{f.productName}}</h2>
		   </div>
			<div class="product-price-cover">
				<div class="product-price-span">
					<span v-if="!flag"   class="product-price">{{f.productPrice}}元</span>
						<span v-else  class="product-price">{{Math.ceil(f.productPrice*0.9)}}元</span>
				</div>
			</div>
			<div class="short-desc mb-30">
				<p class="font-lg">
					{{f.productDetail}}
				</p>
				</div>
			<div class="number">
				<template>
				  <el-input-number class="shuzi" v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10000">
				  </el-input-number>
				  <div class="product-extra-link2">
					  <button @click="Buy" type="submit" class="button button-add-to-cart" style="cursor: pointer">
						  <i  class="fi-rs-shopping-cart el-icon-shopping-cart-full"></i>购买</button>
				</div>
				<div class="img-detail-sum">
					<viewer class="img-detail" v-for="(f, index) in img" :key="index" :images="img" >
						<img  :onerror="errorImg"  @click="tihuan" :src="f.imageUrls" alt=""  />
					</viewer>
				</div>
			

				</template>
			</div>
		  </div>
		  </div></el-col>
		</el-row>
		</div>
		 
		<!-- <div class="section-title3" style="margin-top: -20px;">
		 <div class="title3">
		 	<h3 style="color: #253D4E;" id="q"></h3>
		 </div>
		   </div>
		   <el-row style="margin-top: 160px; margin-left: -20px;">
		     <el-col :span="4" v-for="(f, index) in product" :key="index" :offset="index > 0 ? 1 : 1" style="margin-left: 7.16667%">
		       <el-card :body-style="{ padding: '0px' }" class="type-a2">
		 				  <img :src="f.imgUrl" class="image" @click="productD(f.id)">
		         <div style="padding: 14px;">
		           <span><a href="#" onclick="return false;"  @click="productD(f.id)">{{f.productName}}</a></span>
		   				<span style="margin-left: 20px; color:#3BB77E ;">{{f.productPrice}}元</span>
		           <div class="bottom clearfix2">
		             <time class="time2" >{{ f.productDetail }}</time>
		             <el-button type="text" class="ShoppingBut" @click="productD">
		   					<a href="#" onclick="return false;"  @click="productD(f.id)"  class="gouwuche"><i  class="el-icon-shopping-cart-full"><span >加入</span></i></a>
		   				</el-button>
		           </div>
		         </div>
		       </el-card>
		     </el-col>
		   </el-row> -->
	</el-container>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				//商品图片详情
				img:[],
				num:1,
				//详情商品信息
				pdds:[],
				//文本框所查的商品
				product:[],
				//分类下拉框的id 值
				selectvalue:'',
				value: [],
				//商品分类下拉框的值
				options: [],
				activeIndex: '2',
				//搜索文本框
				input:'',
				flag:false
			}
		},
		created() {
		  this.option(),
		  this.pdd(),
		  this.imgs()
		},
		methods:{
			// denglu(){
			// 	var token=sessionStorage.getItem('token')
			// 	if(!token || token=='undefined'){
			// 		  this.$router.push('/login')
					 
			// 	}
			// },
			 handleChange(value) {
			        console.log(value);
			      },
				  //商品图片详情
			 async imgs(){
				var id=''
				const productid=sessionStorage.getItem('productId')
				const dazheid=sessionStorage.getItem('dazhe')
				if(productid!=0){
					id=productid
					const {data : res}=await this.$http.post(`/buy/productImage/imgsDetail/${id}`,id)
					this.img=res
				}
				if(dazheid!=0){
					id=dazheid
					const {data : res}=await this.$http.post(`/buy/productImage/imgsDetail/${id}`,id)
					this.img=res
					
				}
					   const {data : res}=await this.$http.post(`/buy/productImage/imgsDetail/${id}`,id)
					   this.img=res
					 //  console.log(123456,this.img)
			},
			//详情商品信息
			async pdd(){
				var id=''
				const productid=sessionStorage.getItem('productId')
				const dazheid=sessionStorage.getItem('dazhe')
				if(productid!=0){
					id=productid
				}
				if(dazheid!=0){
					id=dazheid
				}
				if(dazheid!=0)
					this.flag = true
				else
					this.flag = false
			const {data : res}=await this.$http.post(`/buy/product/getOneProduct/${id}`,id)
			this.pdds=res
			},
			async productD(){
				 const {data : res}=await this.$http.post(`/buy/product/getOneProduct`,id)
				 this.$router.push('/productdetails')
			},
			//下拉框分类查询不同的商品
			async sortProduct(id){
				console.log(123,id)
				const {data : res}=await this.$http.post(`/buy/product/sortProduct/${id}`,id)
				 this.$router.push('/sort',id)
				 sessionStorage.setItem('sort', id)
				console.log(res)
			},
			
			
			//主页文本搜索框
			async selectProduct(){
			const	input=this.input
				const {data : res} =await this.$http.post(`/buy/product/selectProduct`,{"input":input})
					this.product=res
				console.log(111,res)
				
			},
			 handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      },
				  //主页下拉搜索框
			async option(){
				const {data: res} =  await this.$http.post('/buy/productType/getProType')
				// for(let i =0;i<res.size;i++){
					this.options=res
				// }
			
			},
		}
	}
</script>

<style scoped>
	.d{
		
	}
	.img-detail-sum{
		width: 790px;
		height: 150px;
		    position: relative;
		    left: 130px;
			top:120px;
	}
	.img-detail{
		display:flex;
		justify-content: center;
		align-items: center;
		overflow:hidden;
		width: 80px;
		height: 80px;
		border: 1px solid  #909399;
		border-radius: 14px;
		float: left;
		margin-left: 40px;
		img{
			width: 100%;
			height: 100%;
			 background-size: cover;
			    background-repeat: no-repeat center;
				 display: block;
				 
		}
	}
	.shuzi{
		position: relative;
		right: -235px;
		    top: 36px;
	}
	.fi-rs-shopping-cart{
		margin-left: 20px;
		font-size: 20px;
		height: 50px;
		position: relative;
		right: 10px;
	}
	.product-extra-link2 a {
	    background: #fff none repeat scroll 0 0;
	    border: 1px solid #f1f1f1;
	    color: #333;
	    border-radius: 5px;
	    display: inline-block;
	    height: 50px;
	    line-height: 55px;
	    position: relative;
	    text-align: center;
	    vertical-align: top;
	    width: 50px;
	    margin: 0 5px;
	    transition: all .5s ease-out 0s;
	    -webkit-transition: all .5s ease-out 0s;
	}
	.product-extra-link2 .button.button-add-to-cart {
		position: relative;
		left: -200px;
		top: -60px;
		color: #ffffff;
		background-color: #3BB77E;
	    position: relative;
	    padding: 0 40px;
	    border-radius: 5px;
	    border: 0;
	    height: 50px;
	    line-height: 50px;
	    font-weight: 700;
	    font-size: 16px;
	    font-family: "Quicksand",sans-serif;
		margin-top: 50px;
		margin-left: 50px;
	}
	.detail-extralink>div {
	    display: inline-block;
	    vertical-align: top;
		
	}
	.number{
		margin-left: -200px;
		    margin-bottom: -150px;
			
	}
	p:last-child {
	    margin-bottom: 0;
	}
	.font-lg {
	    font-size: 17px;
		margin-left: -260px;
		margin-top: -30px;
		position: relative;
		left: 330px;
	}
	
	p {
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 24px;
	    margin-bottom: 5px;
	    color: #7E7E7E;
		    margin: 0;
		    padding: 0;
		    border: 0;
		    font-size: 100%;
		    font: inherit;
		    vertical-align: baseline;
	}
	.mb-30 {
	    margin-bottom: 30px!important;
	}
	.product-price2{
		position: relative;
		left: 220px;
		top:  20px;
		    margin-bottom:280px;
		    margin-left: -210px;
		    font-size: 28px;
		    text-decoration: none;
		    font-weight: 900;
			    color: #909399!important;
				text-decoration: line-through
				 
	}
	.product-price{
		    margin-bottom:280px;
		    margin-left: -210px;
		    font-size: 58px;
		    text-decoration: none;
		    font-weight: 900;
			    color: #3BB77E!important;
	}
	.product-price-span{
		position: relative;
		left: 260px;
		top: 60px;
		    line-height: 1;
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			    margin: 15px 0 30px 0;
	}
	
	.product-details{
		width: 200px;
		position: relative;
		left: 350px;
		top: -200px;
		/* height: 422px; */
		color: #253D4E;
		font-size: 30px;
	
		 
	}
	.imgs2{
		display:flex;
		justify-content: center;
		align-items: center;
		width: 500px;
		height: 500px;
		border: 1px solid  #909399;
		border-radius: 14px;
		background-color: #fff;
	
		}
	.imgs{
		display:flex;
		justify-content: center;
		align-items: center;
		width: 500px;
		height: 500px;
		border: 1px solid  #909399;
		border-radius: 14px;
		background-color: #fff;
		img{
			/* border: 1px solid  #3BB77E; */
			width: 430px;
			  height: 430px; /* 指定div的高度 */
		}
		
	}
	.new{
		background-color: #3BB77E;
		color: #ffffff;
		margin-top: 20px;
		border: 1px solid  #3BB77E;
		border-radius: 4px;
		
	}
	.cuxiao{
		background-color: orange;
		color: #ffffff;
		margin-top: 20px;
		border: 1px solid  #3BB77E;
		border-radius: 4px;
		
	}
	.gouwuche{
		width: 85px;
		height: 36px;
		border: 1px solid #3BB77E;
		background-color: #DEF9EC;
		border-radius: 4px;
		display: inline-block;
		margin-left: 26px;
		span{
			font-size: 18px;
			color:#3BB77E ;
			margin-left: 7px;
			margin-top: 10px;
		}
		i {
			font-size: 18px;
			color:#3BB77E ;
			margin-left: 7px;
			margin-top: 10px;
		}
	}
	.gouwuche:hover{
		background-color: #3BB77E;
		 transform: translateY(-2px);
		span{
			
			color: white;
		}
		i {
			color: white;
		}
	}
	.allspan{
		/* 行内元素 转换为 块级元素 */
					display: block;
					width: auto;
					height: auto;
					color:black;
	}
	 .time {
	    font-size: 13px;
	    color: #999;
	  }
	  .time2{
	     font-size: 13px;
	     color: #999;
	   }
	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }
	
	  .button {
	    padding: 0;
	    float: right;
	  }
	
	  .image {
	    width: 100%;
	    display: block;
	  }
	  .image2 {
	    width: 100%;
	    display: block;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }
	  
	  .clearfix:after {
	      clear: both
	  }
	.clearfix2:before,
	.clearfix2:after {
	    display: table;
	    content: "";
	}
	
	.clearfix2:after {
	    clear: both
	}
	
	.card-1{
		margin-bottom: -90px;
	}
	.section-title2 {
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: -150px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title2 .title2 {
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title2 h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
		    margin-top: 300px;
	}
	.section-title2 a.show-all2 {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	.section-title3 {
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: -150px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title3 .title3{
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title3 h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
		    margin-top: 300px;
	}
	.section-title3 a.show-all3 {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	
	
	
	.type-a{
		margin-bottom: 20px;
		border: 1px solid black;
		a:hover{
			color: #3BB77E;
			 transition: color 0.3s ease;
		}
	}
	
	.type-a:hover{
		border: 1px solid #3BB77E;
		background-color: white;
		 transform: translateY(-2px);
	}
	.type-a2{
		margin-bottom: 20px;
		border: 1px solid black;
		a:hover{
			color: #3BB77E;
			 transition: color 0.3s ease;
		}
	}
	
	.type-a2:hover{
		border: 1px solid #3BB77E;
		background-color: white;
		 transform: translateY(-2px);
	}
	.zz{
		color: #253D4E;
	}
	.zz:hover{
		 color: #3BB77E;
	}
	
	.show-all:hover{
		
		color: #3BB77E;
	}
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: -230px;
	    }
	  }
	  
	 
	 
	.section-title {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: -32px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title .title {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
		    margin-top: -22px;
	}
	.section-title a.show-all {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	
	 .el-carousel__item h3 {
	    color: #ffffff;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 300px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #ffffff;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #ffffff;
	  }
	
	p:last-child {
	    margin-bottom: 0;
	}
	.header-wrap-2-right{
		    margin-left: 526px;
	}
	 .hotline p {
	    color: #3BB77E!important;
	}
	.header-wrap-2-right-span {
	    font-weight: 500;
	    font-size: 12px;
	    font-family: "Lato",sans-serif;
	    color: #7E7E7E;
	    display: block;
	    letter-spacing: .9px;
		margin-top: 25px;
		margin-right: 20px;
	}
	
	p {
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 24px;
	    margin-bottom: 5px;
	    color: #7E7E7E;
		    margin: 0;
		    padding: 0;
		    border: 0;
		    font-size: 100%;
		    font: inherit;
		    vertical-align: baseline;
			    margin-top: 0;
			    margin-bottom: 1rem;
				    margin-right: -155px;
	}
.hotline p {
    color: #3BB77E;
    font-size: 26px;
    font-weight: 700;
    font-family: "Quicksand",sans-serif;
    display: block;
    line-height: 1;
}
	.header-wrap-2{
		height: 74px;
		width: 1564px;
		border-top: 1px solid  darkgray;
		border-bottom: 1px solid  darkgray;
		margin-top: 110px;
	margin-left: -1543px;
	}
	.header-right{
		margin-left: -70px;
	}
	.header-right-icon{
		margin-left: 100px;
		label{
			color: darkgray;
		}
		i{
			font-size: 30px;
		}
		a{
			margin-left: 3px;
			padding: 3px;
		}
	}
	a{
		text-decoration: none;
		color: #333;
	}
	.header-right-input{
		background-color: #ffffff;
		margin-left: 160px;
	}
	.header-wrap{
		margin-top: -80px;
	}
	#Homepage{
		height: 100%;
	}
	 .el-header, .el-footer {
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		/* 
		在flex 布局的容器中，
		可以设置justify-content: space-between;实现两对齐
		*/
		display: flex;
		justify-content: space-between;
		/* 当容器是flext，可以设置 align-items: center */
		align-items: center;
		div {
		  display: flex;
		  align-items: center;
		}
		span {
		  margin-left: 20px;
		}
	  }
	  .el-main {
	    background-color: white;
	    color: white;
	    text-align: center;
	    line-height: 160px;
	  }
	    body > .el-container {
	      margin-bottom: 40px;
	    }
</style>